<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框 border 内间距 padding</title>
    <style>
        .d1{
            width: 200px;
            height: 200px;
            background-color: #00f;
            border: red solid ;
            /* 设置 单方向的边框 */
            border-top: 5px dotted #0f0;
            border-left: 5px dotted yellow;

            border-radius: 100px;
        }
        .d2{
            width: 200px;
            height: 200px;
            border: 5px solid deeppink;
            padding-left: 50px;
            padding-top: 50px;
            /* 将盒子模型计算方按 切换为盒子模型 */
            /* 效果将:边框,内间距 内容都在算在预设 之中 */
            box-sizing: border-box;
            /*外间距不属于元素本身大小 但是会占据页面布局空间 */
            margin: 60PX;
        }
        span{
            border: 3px solid #f00;
        }
        .s2{
            /* 行类元素 垂直方向上的内外间距都不生效,用了也没用 */
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2">这里有文字</div>
<hr>
<span>我是span1</span>
<span class="s2">我是span2</span>
<span>我是span3</span>
</body>
</html>